<template>
	<view class="container">
		<view class="box">
			<movable-area scale-area class="box_area">
				<movable-view :x="x" :y="y" direction="all" @change="onChange" scale out-of-bounds
					:scale-value="scalevalue" :scale-max="3" :scale-min="0.5">
					<checkbox-group class="checkbox_group">
						<label v-for="(item,index) in list" :key="index">
							<checkbox :checked="item.choose" v-model="item.choose" v-if="item.status" />
							<view class="zw" v-else></view>
						</label>
					</checkbox-group>
				</movable-view>
			</movable-area>

		</view>
		<view class="xxx">
			<button @click="scalefd">放大</button>
			<button @click="scalesx">缩小</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scalevalue: 0.8,
				x: 120,
				y: 15,
				old: {
					x: 0,
					y: 0
				},
				list: [

					{
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					},

					{
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: false,
						choose: false,
					}, {
						status: false,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: false,
						choose: false,
					}, {
						status: false,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: false,
						choose: false,
					}, {
						status: false,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: false,
						choose: false,
					}, {
						status: false,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					},
					{
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: false,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: false,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: false,
						choose: false,
					}, {
						status: false,
						choose: false,
					}, {
						status: false,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					}, {
						status: true,
						choose: false,
					},
				]
			}
		},
		onLoad() {},
		methods: {
			scalefd() {
				console.log(this.scalevalue);
				if (this.scalevalue < 3) {
					this.scalevalue += 0.1
				}
			},
			scalesx() {
				console.log(this.scalevalue);
				if (this.scalevalue > 0.5) {
					this.scalevalue -= 0.1
				}
			},
			onChange: function(e) {
				this.old.x = e.detail.x
				this.old.y = e.detail.y
			}
		}
	}
</script>
<style lang="less">
	page {
		background-color: #f4f4f4;
	}

	.xxx {
		background-color: aqua;
	}

	.box {
		background-color: #b9c0c9;
		position: relative;
		width: 750rpx;
		height: 550rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;

		.box_area {
			left: -150rpx;
			position: absolute;
			width: 750rpx;
			height: 250rpx;
		}
	}

	.checkbox_group {
		width: 690rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}

	.zw {
		width: 48rpx;
		height: 48rpx;
		margin-right: 10rpx;
	}
</style>